<template>
    <view class="order-container">
        <!-- 订单基本信息 -->
        <order-detail-baby v-if="orderOrigin.news_type == 7" :orderInfo="order" :babyInfo="baby" />
        <order-detail-meeting v-else-if="orderOrigin.news_type == 8" :orderInfo="order" :meetingInfo="meeting" />
        <order-detail v-else :orderInfo="order" :orderOrigin="orderOrigin" />
        <!-- 结算单 -->
        <settlement :settlement="orderOrigin" :settlementImages="settlementImages" v-if="orderOrigin.cooperation_mode == 1"></settlement>
        <!-- 婚宴信息 -->
        <banquet v-if="!['11', '12'].includes(orderOrigin.news_type) && Object.keys(banquet).length > 0" :newsType="orderOrigin.news_type + ''" :baby="baby" :banquet="banquet" :banquetSuborder="banquetSuborder" :table="table" :vegetable="vegetable" />
        <!-- 婚庆信息 -->
        <wedding  v-if="!['11', '12'].includes(orderOrigin.news_type) && Object.keys(wedding).length > 0" :wedding="wedding" :weddingSuborder="weddingSuborder" />
        <!-- 酒店协议 -->
        <hotel v-if="hotelProtocol.length != 0 || hotelService.length != 0" :hotelProtocol="hotelProtocol" :hotelService="hotelService" />
        <!-- 婚车信息 -->
        <car v-if="car.length != 0" :car="car"></car>
        <!-- 收付款 -->
        <money v-if="!['11', '12'].includes(orderOrigin.news_type) && income.length != 0 || payment.length != 0 " :order_id="order_id" :income="income" :payment="payment" />
        <!-- 底部导航 -->
        <footer-menu-btn :menus="menus" @actionClick="actionClick"></footer-menu-btn>
        <uni-transition :mode-class="['fade']" :show="isSHowAfterSale">
            <view class="right_text_top" style="transition: all 0.5s; ">
                <text class="operation_text" v-for="(item, index) in actionsBtn" :key="index" @click="actionBtnClick(item.type)">{{ item.title }}</text>
                <text class="operation_text" v-if="actionsBtn.length == 0">暂无更多</text>
            </view>
        </uni-transition>

        <!-- 添加项目列表 -->
        <wzp-picker ref="wzpPicker" :mode="mode" :pickerList="pickerList" :defaultIndex="defaultIndex" @onConfirm="onConfirm"></wzp-picker>
        <!-- 转单 -->
        <wzp-picker ref="orderPicker" :mode="orderMode" :pickerList="orderPickerList" :defaultIndex="orderDefaultIndex" @onConfirm="orderOnConfirm"></wzp-picker>
        <!-- 增加利润 -->
        <profit v-if="Object.keys(profit).length > 0" :profit="profit"></profit>
        <!-- 增加利润 -->
        <activities v-if="Object.keys(activities).length > 0 &&(orderOrigin.news_type == 11 || orderOrigin.news_type == 12)" :activities="activities"></activities>
    </view>
</template>

<script>
import orderDetail from '../components/order/detail.vue';
import orderDetailBaby from '../components/order/baby.detail.vue';
import orderDetailMeeting from '../components/order/meeting.detail.vue';
import activities from '../components/activities/detail.vue';
import settlement from '../components/settlement/settlement.tab.vue';
import banquet from '../components/banquet/banquet.tab.vue';
import wedding from '../components/wedding/wedding.tab.vue';
import hotel from '../components/hotel/hotel.tab.vue';
import car from '../components/car/car.tab.vue';
import money from '../components/money/money.tab.vue';
import footerMenuBtn from '@/component/footer-menu-btn/footer-menu-btn.vue';
import wzpPicker from '@/component/wzp-picker/wzpPicker.vue';
import profit from '../components/profit/profit.tab.vue'
import titleFix from "@/utils/titleFix";
import sun from '@/utils/request.js';

export default {
    name: "detail",
    mixins: [titleFix],
    components: {
        orderDetail,
        orderDetailBaby,
        orderDetailMeeting,
        settlement,
        banquet,
        wedding,
        hotel,
        car,
        money,
        footerMenuBtn,
        wzpPicker,
        profit,
        activities
    },
    data() {
        return {
            order_id: 0,
            order: {},
            settlementImages: [],
            orderOrigin: {},
            banquet: {},
            banquetSuborder: [],
            wedding: {},
            weddingSuborder: [],
            hotelProtocol: [],
            hotelService: [],
            income: [],
            payment: [],
            table: [],
            vegetable: [],
            car: [],
            baby: {},
            meeting: {},
            actionsBtn: [],
            profit: {},
            activities: {},

            //转单
            orderMode: '',
            orderPickerValue: '',
            orderPickerList: [{
                id: '',
                title: '定单'
            },
            {
                id: '',
                title: '返佣单'
            }
            ],
            orderDefaultIndex: [],

            // 底部菜单导航
            mode: '', // 添加项目picker
            pickerList: [],
            defaultIndex: [],
            addItemsArray: [],
            menus: [{
                type: 'more',
                img: '/static/tabBarImg/list.png',
                text: '更多'
            },
            {
                type: 'confirm',
                img: '/static/tabBarImg/select_waters.png',
                text: '查看审核'
            },
            // {
            // 	type: 'detail',
            // 	img: '/static/tabBarImg/follow.png',
            // 	text: '统计'
            // },
            {
                type: 'add',
                img: '/static/tabBarImg/statement.png',
                text: '添加项目'
            }
            ],
            isSHowAfterSale: false // 更多
        };
    },
    onLoad(options) {
        this.order_id = options.order_id;
        this.getOrderDetail(options);
    },
    onShow() {
        this.getOrderDetail();
    },
    methods: {
        // 获取订单信息
        getOrderDetail(options) {
            let that = this;
            let params = {
                id: that.order_id
            };
            sun.request({
                url: '/api/order.order/detail',
                showLoading: true,
                token: true,
                data: params,
                success(res) {
                    if (res.code == 200) {
                        that.order = res.data.order;
                        that.settlementImages = res.data.order.images;
                        that.orderOrigin = res.data.orderOrigin;
                        that.banquet = res.data.banquet;
                        that.banquetSuborder = res.data.banquetSuborder;
                        that.table = res.data.table;
                        that.vegetable = res.data.vegetable;
                        that.wedding = res.data.wedding;
                        that.weddingSuborder = res.data.weddingSuborder;
                        that.hotelProtocol = res.data.hotelProtocol;
                        that.hotelService = res.data.hotelService;
                        that.income = res.data.income;
                        that.payment = res.data.payment;
                        that.addItemsArray = res.data.addItems;
                        // 婚车信息
                        that.car = res.data.car;
                        // 宝宝宴信息
                        that.baby = res.data.baby;
                        that.meeting = res.data.meeting;
                        that.activities = res.data.activities;
                        // 增加利润
                        that.profit = res.data.profit
                        if (options) {
                            that.getActionsBtn();
                        }
                    } else {
                        uni.showToast({
                            icon: 'none',
                            title: res.msg
                        });
                    }
                },
                fail(e) {
                    uni.showToast({
                        icon: 'none',
                        title: '服务器开小差去啦~'
                    });
                }
            });
        },

        getActionsBtn() {
            let that = this;
            let order = that.orderOrigin;
            if (['98', '99'].includes(order.complete) && order.item_check_status == 2 && order.status != 2) {
                that.actionsBtn.push({
                    title: '转单',
                    type: 'confirms'
                });
            }

            if (order.item_check_status == 2 && order.status != 2) {
                that.actionsBtn.push({
                    title: '退单',
                    type: 'closes'
                });
            }
            if (order.pid > 0) {
                that.actionsBtn.push({
                    title: '原订单',
                    type: 'gotoOginOrder'
                });
            }
        },

        // 底部导航点击
        actionClick(type) {
            let that = this;
            switch (type) {
                case 'more':
                    that.isSHowAfterSale = !that.isSHowAfterSale;
                    break;
                case 'confirm':
                    that.isSHowAfterSale = false;
                    uni.navigateTo({
                        url: '/pages/orderInfo/myApproval/myApproval?id=' + that.order_id
                    });
                    break;
                case 'detail':
                    that.isSHowAfterSale = false;
                    break;

                case 'add':
                    that.mode = 'two_linkage';
                    that.pickerList = that.addItemsArray;
                    that.defaultIndex = [0, 0];
                    that.$refs.wzpPicker.showPicker();
                    break;
                default:
                    break;
            }
        },

        // picker确定
        onConfirm(e) {
            if (!this.pickerList[e[0]].children[e[1]]) {
                this.pickerValue = this.pickerList[e[0]].title;
            } else {
                this.pickerValue = this.pickerList[e[0]].title + ' ' + this.pickerList[e[0]].children[e[1]].title;
            }

            let one = e[0];
            let two = e[1];
            let id = '';
            let params = {};

            if (this.addItemsArray[one]) {
                this.addItemsArray[one].order_id = this.order_id;
                id = this.addItemsArray[one].id;
                params = this.addItemsArray[one];
            }
            if (this.addItemsArray[one].children[two]) {
                this.addItemsArray[one].children[two].order_id = this.order_id;
                id = this.addItemsArray[one].children[two].id;
                params = this.addItemsArray[one].children[two];
            }

            let paramsJson = JSON.stringify(params);
            let path = `/pages/audit/${id}/${id}?params=${paramsJson}`;
            uni.navigateTo({
                url: path
            });
        },

        actionBtnClick(type) {
            let that = this;
            if (type == 'confirms') {
                that.confirms();
            } else if (type == 'closes') {
                that.closes();
            } else if (type == 'gotoOginOrder') {
                uni.navigateTo({
                    url: '/pages/order/detail/detail?order_id=' + that.order.pid
                });
            }
        },

        // 转单
        confirms() {
            this.orderMode = 'one';
            this.orderDefaultIndex = [0];
            this.$refs.orderPicker.showPicker();
        },

        //转单选择
        orderOnConfirm(e) {
            let url = '';
            let jsonStr = JSON.stringify(this.orderOrigin).replace(/%/g, "%25");
            let encodeStr = encodeURIComponent(jsonStr);

            //转定单
            if (e[0] === 0) {
                url = `/pages/order/createOrder/createOrder?toOrder=${encodeStr}`;
            }

            //转返佣单
            if (e[0] === 1) {
                url = `/pages/order/createOrder/createOrder?toCommission=${encodeStr}`;
            }

            if (url == '') {
                uni.showToast({
                    title: '匹配的事件',
                    duration: 2000
                });
                return false;
            }

            uni.navigateTo({
                url: url
            });
        },

        //退款
        closes() {
            let params = {
                id: 'payment',
                title: '退款',
                read: '/h5/order.payment/create',
                api: '/h5/order.payment/doCreate',
                children: [],
                order_id: this.order.id,
                complete: this.order.complete
            };
            uni.navigateTo({
                url: `/pages/audit/drawback/drawback?params=${JSON.stringify(params)}`
            });
        }
    }
};
</script>

<style lang="less">
uni-page-body {
    padding-top: 0;
}

.order-container {
    padding-bottom: 60px;

    .operation_text {
        padding: 10upx 0;
        font-size: 24upx;
        border-bottom: 0.5px solid #dedede;
        width: 4rem;
    }

    .operation_text:last-child {
        border-bottom: none;
    }

    .right_text_top {
        padding: 14upx 38upx;
        position: fixed;
        bottom: 140upx;
        left: 32upx;
        background-color: rgba(0, 0, 0, 0.65);
        color: #fff;
        border-radius: 10upx;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .right_text_top:after {
        content: "";
        width: 0;
        height: 0;
        border-width: 10px;
        border-style: solid;
        border-color: rgba(0, 0, 0, 0.65) transparent transparent transparent;
        position: absolute;
        right: 38%;
        bottom: -20px;
    }
}
</style>
